<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
        li {
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }

        li img {
            width: 100px;
        }
    </style>
    <script src='https://unpkg.com/vue@next'></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="isAll" @change="change" />全选/全不选
        <ul>
            <li v-for="(item, index) in list" :key="item.id">
                <input type="checkbox" v-model="checkList" :value="item" @change="changeItem" />
                <img :src="item.pic" />
                <div>
                    <div>{{item.name}}</div>
                    <div style="color: red;">￥{{item.price}}</div>
                </div>
                <div>
                    <!-- item 变化导致 checkList 变化，sum 函数变化 -->
                    <button @click="item.number--" :disabled="item.number ===1">-</button>
                    <span>{{item.number}}</span>
                    <button @click="item.number++" :disabled="item.number === item.limit">+</button>
                </div>
                <div>
                    <button @click="deleteClick(index, item.id)">删除</button>
                </div>
            </li>
        </ul>
        <div>总金额: {{sum()}}</div>
        checkList--{{checkList}}
    </div>
    <script type="text/javascript">
        let obj = {
            data() {
                return {
                    isAll: false, // 是否全选
                    checkList: [], // 勾选的数据
                    list: [{
                        name: "商品1",
                        price: 10,
                        number: 1,
                        id: 1,
                        limit: 5, //限购
                        pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    }, {
                        name: "商品2",
                        price: 20,
                        number: 2,
                        id: 2,
                        limit: 10, //限购
                        pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    }, {
                        name: "商品3",
                        price: 30,
                        number: 3,
                        id: 3,
                        limit: 15, //限购
                        pic: "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    }]
                }
            },
            methods: {
                // 函数依赖的状态改变，触发函数的重新执行
                // 总金额
                sum() {
                    let total = 0;
                    this.checkList.forEach(item => {
                        total += item.price * item.number;
                    });
                    return total;
                },
                // 删除商品
                deleteClick(index, id) {
                    // console.log(index);
                    // list 依据 index 删除
                    this.list.splice(index, 1);
                    // checkList 依据 id 删除
                    this.checkList = this.checkList.filter(item => item.id !== id);

                    // 手动调用
                    this.changeItem();
                },
                // 全选
                change() {
                    if (this.isAll) {
                        this.checkList = this.list;
                    } else {
                        this.checkList = [];
                    }
                },
                // 每项选择
                changeItem() {
                    if (this.checkList.length == this.list.length) {
                        this.isAll = true; //全选 
                    } else {
                        this.isAll = false;
                    }
                }
            }
        }

        let vm = Vue.createApp(obj).mount("#app");
        // vue 理念：递归深度拦截状态，数据驱动页面变化。
    </script>
</body>

</html>